<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/css/bootstrap.css">
    <style>
        img {
            width: 100px;

        }

        /* .tp input {
            border-radius: 50%;
        } */
    </style>
</head>

<body>
    <div class="panel panel-primary container">
        <div class="panel-heading">英雄列表管理</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-8">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入英雄名称">
                        <span class="input-group-btn">
                            <button class="btn btn-default" id="heroNameInput" type="button">搜索</button>
                        </span>
                    </div>
                </div>
                <div class="col-xs-4">
                    <button type="button" class="btn btn-success" id="addHeroBtn">添加英雄</button>
                </div>
            </div>
            <hr>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>性别</th>
                        <th>头像</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>2</td>
                        <td>程咬金</td>
                        <td>男</td>
                        <td> <img
                                src="https://t8.baidu.com/it/u=1766388123,1260892338&fm=85&app=79&f=JPG?w=121&h=75&s=5A94448AD0B885920D3F78B803009068"
                                alt=""></td>
                        <td>
                            <button class="btn btn-warning">上传头像</button>
                            <button class="btn btn-danger">删除</button>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    添加英雄
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4> -->
                </div>
                <div class="modal-body">
                    <div class="xinmin">
                        英雄姓名
                        <input type="text" class="input" placeholder="请输入英雄名称">
                    </div>
                    <div class="xbie">
                        性别：
                        <input type="radio" name='xbie' checked value="男">男
                        <input type="radio" name='xbie' value="女">女
                    </div>
                    <!-- <div class="tp">
                        头像
                        <button type="file"></button>
                         显示上传之后的图片
                        <div id='previewImg'>
                            <img src="" id='viewImg' />
                        </div>
                    </div> -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="submitBtn">添加</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./lib/js/bootstrap.js"></script>
    <script>
        $(function () {
            function xuanran(heroName) {
                $.get('http://127.0.0.1:3001/getHeroList', { heroName }, function (arr) {
                    let html = ''
                    arr.data.forEach((item, index) => {
                        html += `<tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.gender}</td>
                    <td><img src="${item.img}"alt=""></td>
                    <td style="position:relative">
                        <button class="btn btn-warning" data-id="${item.id}" >上传头像</button>
                        <input style="position: absolute; top: 8px; left: 8px; opacity: 0; width: 82px; height: 34px; background: yellow; cursor: pointer"  type="file" data-id="${item.id}" class="scwj"/>
                        <button class="btn btn-danger" data-id='${item.id}'>删除</button>
                    </td>
                        </tr>`
                    })
                    $('tbody').html(html)
                })
            }
            $('.btn-default').on('click', function () {
                let heroName = $(".form-control").val();
                xuanran(heroName)
                $(".form-control").val('')
            })
            $('.btn-success').on('click', function () {
                $('#myModal').modal('show')
            })
            $('#submitBtn').on('click', function () {
                let name = $('.input').val().trim()
                let gender = $('.xbie input:checked').val()
                let img = ''
                let obj = { name, gender, img }
                $.post('http://127.0.0.1:3001/addHero', obj, function (arr) {
                    $('#myModal').modal('hide')
                    $('.input').val('')
                    xuanran('')
                })
            })
            $('tbody').on('click', '.btn-danger', function () {
                if (confirm('你确定删除吗')) {
                    let id = $(this).data('id')
                    $.get('http://127.0.0.1:3001/delHeroById', { id }, function (arr) {
                        xuanran('')
                    })
                }
            })
            $("tbody").on("change", ".scwj", function () {
                console.log($(this).data('id'))
                let that = this
                let file = this.files[0]
                let fd = new FormData()
                fd.append("file_data", file)
                $.ajax({
                    url: "http://127.0.0.1:3001/uploadFile",
                    type: "post",
                    data: fd,
                    processData: false,
                    contentType: false,
                    success(diyi) {
                        let img = diyi.src
                        let id = $(that).data('id')
                        $.post('http://127.0.0.1:3001/updateHero', { id, img }, function (dire) {
                            // console.log(dire);
                            xuanran('')
                        })
                    }
                })
            })
        })
    </script>
</body>

</html>